<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>华为商城</title>
    <link
      rel="stylesheet"
      href="./styles/font-awesome-4.7.0/css/font-awesome.css"
    />
    <link rel="stylesheet" href="./styles/index.css" />
    <link rel="stylesheet" href="./styles/main.css" />
  </head>
  <body>
    <section class="my-info">
      <section class="my-info_content">
        <!-- 顶部菜单栏的左边 -->
        <div class="my-info_content_left">
          <!-- 首页 -->
          <div class="parent">
            <div class="title">首页</div>
          </div>
          <div>|</div>
          <!-- 华为官网 -->
          <div class="parent">
            <div class="title">华为官网</div>
          </div>
          <div>|</div>
          <!-- 荣耀官网 -->
          <div class="parent">
            <div class="title">荣耀官网</div>
          </div>
          <div>|</div>
          <!-- 花粉俱乐部 -->
          <div class="parent">
            <div class="title">花粉俱乐部</div>
          </div>
          <div>|</div>
          <!-- v码(优购码) -->
          <div class="parent">
            <div class="title">V码(优购码)</div>
          </div>
          <div>|</div>
          <!-- 企业购 -->
          <div class="parent">
            <div class="title">企业购</div>
          </div>
          <div>|</div>
          <!-- Select Region -->
          <div class="parent">
            <div class="title">Select Region</div>
          </div>
          <div>|</div>
          <!-- 更多精彩 -->
          <div class="parent">
            <div class="title1">
              更多精彩
              <i class="fa fa-chevron-down" aria-hidden="true"></i>
            </div>
            <div class="content one">
              <div class="drop-down">
                <div class="drop-down_list">EMUI</div>
              </div>
              <div class="drop-down">
                <div class="drop-down_list">应用商店</div>
              </div>
              <div class="drop-down">
                <div class="drop-down_list">华为终端云空间</div>
              </div>
              <div class="drop-down">
                <div class="drop-down_list">开发者联盟</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 顶部菜单栏的右边 -->
        <div class="my-info_content_right">
          <!-- 登录 -->
          <div class="parent">
            <div class="title">请登录</div>
          </div>
          <!-- 注册 -->
          <div class="parent">
            <div class="title">注册</div>
          </div>
          <div>|</div>
          <!-- 我的订单 -->
          <div class="parent">
            <div class="title">我的订单</div>
          </div>
          <div>|</div>
          <!-- 客服服务 -->
          <div class="bj">
            <div class="parent">
              <div class="title">
                客户服务
                <i class="fa fa-chevron-down" aria-hidden="true"></i>
              </div>
            </div>
            <div class="content two">
              <div class="drop-down">
                <div class="drop-down_list">服务中心</div>
              </div>
              <div class="drop-down">
                <div class="drop-down_list">联系客服</div>
              </div>
            </div>
          </div>
          <div>|</div>
          <!-- 网站导航 -->
          <div class="bj">
            <div class="parent">
              <div class="title">
                网站导航
                <i class="fa fa-chevron-down" aria-hidden="true"></i>
              </div>
            </div>
            <div class="content there">
              <div class="navigetion">
                <section class="part">
                  <div class="img-mall"></div>
                  <div class="mall">商城首页</div>
                </section>
                <section>
                  <div class="word1">
                    <div class="part">
                      <div class="word-title">频道</div>
                    </div>
                    <div class="part">
                      <div class="word-content">
                        华为专区
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
                          >荣耀专区</span
                        >
                      </div>
                    </div>
                    <div class="part">
                      <div class="word-content">企业购</div>
                    </div>
                  </div>
                </section>
                <section>
                  <div class="word2">
                    <div class="word-title">产品</div>
                    <div class="part">
                      <div class="word-content">
                        手机
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
                          >笔记本</span
                        >
                      </div>
                    </div>
                    <div class="part">
                      <div class="word-content">
                        平板
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
                          >智能穿戴</span
                        >
                      </div>
                    </div>
                    <div class="part">
                      <div class="word-content">
                        智能家居
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
                          >智慧屏</span
                        >
                      </div>
                    </div>
                    <div class="part">
                      <div class="word-content">
                        耳机音箱
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
                          >热销配件</span
                        >
                      </div>
                    </div>
                    <div class="part">
                      <div class="word-content">
                        生态产品
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
                          >增值服务</span
                        >
                      </div>
                    </div>
                  </div>
                </section>
                <section>
                  <div class="word3">
                    <div class="word-title">增值服务</div>
                    <div class="part">
                      <div class="word-content">
                        以旧换新
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
                          >补购保障</span
                        >
                      </div>
                    </div>
                    <div class="part">
                      <div class="word-content">一口价换电池</div>
                    </div>
                  </div>
                </section>
                <section>
                  <div class="word4">
                    <div class="word-title">会员</div>
                    <div class="part">
                      <div class="word-content">会员频道</div>
                    </div>
                  </div>
                </section>
                <section></section>
              </div>
            </div>
          </div>
          <div>|</div>
          <!-- 手机版 -->
          <div class="bj">
            <div class="parent">
              <div class="title">
                手机版
                <i class="fa fa-chevron-down" aria-hidden="true"></i>
              </div>
            </div>
            <div class="content four">
              <div>
                <div class="img-phone1"></div>
                <div class="img-phone2"></div>
                <div class="img-phone3"></div>
              </div>
            </div>
          </div>
          <div>|</div>
          <!-- 购物车 -->
          <div class="bj">
            <div class="parent">
              <div class="title">
                <i class="fa fa-shopping-cart" aria-hidden="true"></i>
                购物车(0)
              </div>
            </div>
            <div class="content five">
              <div class="img-shopping"></div>
              <div>您的购物车是空的，赶紧选购吧~</div>
            </div>
          </div>
          <div></div>
          <div></div>
        </div>
      </section>
    </section>

    <!-- 搜索框，导航栏 -->
    <section class="my-search">
      <section class="my-search_content">
        <section class="my-search_content_left">
          <div class="part">
            <div class="logo"></div>
          </div>
          <div class="part">
            <div><img src="./images/5.png" alt="图片无法显示" /></div>
          </div>
          <div class="part">
            <div><img src="./images/6.png" alt="图片无法显示" /></div>
          </div>
          <div class="part">
            <div class="my-search_content_word">华为P40系列</div>
          </div>
          <div class="part">
            <div class="my-search_content_word">荣耀30系列</div>
          </div>
          <div class="part">
            <div class="my-search_content_word">安心居家</div>
          </div>
        </section>
        <section class="my-search_content_right">
            <input type="text" />
              <i class="fa fa-search" aria-hidden="true"></i>
          </div>
        </section>
      </section>
    </section>

    <!-- 内容区 -->
    <section class="my-display">
      <section class="my-display_content">
        <section class="my-display_content_left">
          <div class="parent">
          <div class="content">
            <div class="product">手机 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-right fa-2x" aria-hidden="true"></i></div>
          <div class="show">你好</div>
          </div>
          <div class="content">
            <div class="product">笔记本 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-right fa-2x" aria-hidden="true"></i></div>
          <div class="show">你好</div>
          </div>
          <div class="content">
            <div class="product">平板 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-right fa-2x" aria-hidden="true"></i></div>
            <div class="show">你好</div>
          </div>
          <div class="content">
            <div class="product">智能穿戴&VR &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-right fa-2x" aria-hidden="true"></i></div>
            <div class="show">你好</div>
          </div>
          <div class="content">
            <div class="product">智能家居 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-right fa-2x" aria-hidden="true"></i></div>
            <div class="show">你好</div>
          </div>
          <div class="content">
            <div class="product">智慧屏 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-right fa-2x" aria-hidden="true"></i></div>
            <div class="show">你好</div>
          </div>
          <div class="content">
            <div class="product">耳机音箱 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-right fa-2x" aria-hidden="true"></i></div>
            <div class="show">你好</div>
          </div>
          <div class="content">
            <div class="product">配件 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-right fa-2x" aria-hidden="true"></i></div>
            <div class="show">你好</div>
          </div>
          <div class="content">
            <div class="product">生态产品 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-right fa-2x" aria-hidden="true"></i></div>
            <div class="show">你好</div>
          </div>
          <div class="content">
            <div class="product">增值服务&其他 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-right fa-2x" aria-hidden="true"></i></div>
            <div class="show">你好</div>
          </div>
          </div>
        </section>
        </section>
        <section class="my-display_content_right">
          <div class="img-change1"></div>
          <div class="img-change2"></div>
          <div class="img-change3"></div>
        </section>
    </section>
  </body>
</html>
